<template>
  <div>
    <div class="row">
      <div
        class="col-lg-3 col-md-3"
        v-for="(elecMeter, index) in elecMeters"
        :key="index"
      >
        <div class="jgbox">
          <h3>电表ID：{{ elecMeter.elec_meter_id }}</h3>
          <ul>
            <li>
              <chart
                :chart-data="{
                  id: elecMeter.elec_meter_id + '1',
                  value: elecMeter.ea,
                }"
              />
              <p>总电量</p>
            </li>
            <li>
              <chart
                :chart-data="{
                  id: elecMeter.elec_meter_id,
                  value: elecMeter.ef,
                }"
              />
              <p>正向电量</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import chart from "./chart";
import { getAllElecMeter } from "@/api/link";

export default {
  components: {
    chart,
  },
  data() {
    return {
      elecMeters: undefined,
    };
  },
  created() {
    getAllElecMeter().then((res) => {
      this.elecMeters = res.data;
    });
  },
  methods: {},
};
</script>
<style>
.jgbox ul li {
  width: 50%;
}
</style>
